<template>
  <div>
    <vue-loading v-show="!isLoaded"></vue-loading>
    <div v-show="isLoaded">
      <Table :request-data="requestData" v-on:list="listHander" ref="table">
        <template slot="search-box">
          <el-form-item label="筛选">
            <el-select
              placeholder="选择筛选项目"
              style="width:130px"
              v-model="requestData.postData.filterType"
            >
              <el-option label="全部" value="-1"></el-option>
              <el-option v-for="item of filterType" :label="item.value" :value="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="filterInputShow">
            <el-input v-model="requestData.postData.filterText" style="width:130px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </template>
        <template slot="table-box">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-tabs type="border-card">
                  <el-tab-pane label="软件设置" class="main-h-center">
                    <el-form label-position="left" inline class="table-expand">
                      <el-form-item label="客户端ID">
                        <span>{{ scope.row.client_id }}</span>
                      </el-form-item>
                      <el-form-item label="PC码">
                        <span>{{ scope.row.pc_code }}</span>
                      </el-form-item>
                      <el-form-item label="昵称">
                        <el-input
                          v-model="scope.row.nick"
                          placeholder="填写昵称"
                          clearable
                          size="small"
                          v-show="currentEdit==scope.$index"
                        ></el-input>
                        <span v-show="currentEdit!=scope.$index">{{ scope.row.nick }}</span>
                      </el-form-item>
                      <el-form-item label="登录密码">
                        <el-input
                          v-model="scope.row.password"
                          placeholder="填写登录密码"
                          clearable
                          size="small"
                          v-show="currentEdit==scope.$index"
                        ></el-input>
                        <span v-show="currentEdit!=scope.$index">{{ scope.row.password }}</span>
                      </el-form-item>
                      <el-form-item label="QQ">
                        <el-input
                          v-model="scope.row.qq"
                          placeholder="填写QQ"
                          type="number"
                          clearable
                          size="small"
                          v-show="currentEdit==scope.$index"
                        ></el-input>
                        <span v-show="currentEdit!=scope.$index">{{ scope.row.qq }}</span>
                      </el-form-item>
                      <el-form-item label="微信">
                        <el-input
                          v-model="scope.row.wx"
                          placeholder="填写微信"
                          clearable
                          size="small"
                          v-show="currentEdit==scope.$index"
                        ></el-input>
                        <span v-show="currentEdit!=scope.$index">{{ scope.row.wx }}</span>
                      </el-form-item>
                      <el-form-item label="手机">
                        <el-input
                          v-model="scope.row.tel"
                          placeholder="填写手机"
                          type="number"
                          clearable
                          size="small"
                          v-show="currentEdit==scope.$index"
                        ></el-input>
                        <span v-show="currentEdit!=scope.$index">{{ scope.row.tel }}</span>
                      </el-form-item>
                      <el-form-item label="积分">
                        <el-input
                          v-model="scope.row.integral"
                          placeholder="填写积分"
                          type="number"
                          clearable
                          size="small"
                          v-show="currentEdit==scope.$index"
                        ></el-input>
                        <span v-show="currentEdit!=scope.$index">{{ scope.row.integral }}</span>
                      </el-form-item>
                      <el-form-item label="备注信息">
                        <el-input
                          v-model="scope.row.bd_info"
                          placeholder="填写备注信息"
                          clearable
                          size="small"
                          v-show="currentEdit==scope.$index"
                        ></el-input>
                        <span v-show="currentEdit!=scope.$index">{{scope.row.bd_info}}</span>
                      </el-form-item>
                      <el-form-item label="E-mail">
                        <el-input
                          v-model="scope.row.email"
                          placeholder="填写E-mail"
                          clearable
                          size="small"
                          v-show="currentEdit==scope.$index"
                        ></el-input>
                        <span v-show="currentEdit!=scope.$index">{{scope.row.email}}</span>
                      </el-form-item>
                    </el-form>
                  </el-tab-pane>
                  <el-tab-pane label="收货地址" class="main-h-center">
                    <Address :username="scope.row.username"></Address>
                  </el-tab-pane>
                  <el-tab-pane label="登录日志" class="main-h-center">
                    <LoginLog :username="scope.row.username"></LoginLog>
                  </el-tab-pane>
                  <el-tab-pane label="积分收支" class="main-h-center">
                    <IntegralLog :username="scope.row.username"></IntegralLog>
                  </el-tab-pane>
                </el-tabs>
              </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="180"></el-table-column>
            <el-table-column prop="online" label="状态" width="50">
              <template slot-scope="scope">
                <i
                  :class="scope.row.online?'fa fa-link':'fa fa-unlink'"
                  :style="scope.row.online?'color:#32cd32':'color:#c3c3c4'"
                />
              </template>
            </el-table-column>
            <el-table-column prop="nick" label="昵称" width="180"></el-table-column>
            <el-table-column prop="integral" label="积分" width="80"></el-table-column>
            <el-table-column prop="share_code" label="推广码" width="150"></el-table-column>
            <el-table-column prop="email" label="E-mail" width="200"></el-table-column>
            <el-table-column label="注册日期" width="180">
              <template slot-scope="scope">
                <span>{{ $utils.formatDateTime(scope.row.add_time)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="上次登录时间" width="180">
              <template slot-scope="scope">
                <span>{{ $utils.formatDateTime(scope.row.last_login_time)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="bd_info" label="备注"></el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <div v-show="currentEdit!=scope.$index">
                  <i class="el-icon-edit main-ico-btn" @click="handleEdit(scope.$index)"></i>
                  <i class="el-icon-delete main-ico-btn" @click="handleRemove(scope.$index)"></i>
                  <i
                    v-bind:style="{color:scope.row.is_lock?'red':''}"
                    v-bind:class="scope.row.is_lock?'fa fa-lock main-ico-btn':'fa fa-unlock main-ico-btn'"
                    @click="handleLock(scope.$index)"
                  ></i>
                </div>
                <div v-show="currentEdit==scope.$index">
                  <el-button size="mini" @click="handleSave(scope.$index)">保存</el-button>
                  <el-button size="mini" @click="handleCancel(scope.$index)">取消</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </Table>
    </div>
  </div>
</template>
<script>
import Table from "@/components/Table.vue";
import LoginLog from "./components/LoginLog";
import IntegralLog from "./components/IntegralLog.vue";
import Address from "./components/Address.vue";
export default {
  components: {
    Table,
    LoginLog,
    Address,
    IntegralLog
  },
  data() {
    return {
      isLoaded: false,
      filterInputShow: false,
      currentEdit: -1,
      requestData: {
        urlPath: "/user/list",
        postData: {
          softcode: "-1",
          filterType: "-1",
          filterText: "",
          pageNum: 1,
          pageSize: 20
        }
      },
      editData: {
        day: 0
      },
      tableData: [],
      filterType: [
        { key: "username", value: "用户名称" },
        { key: "qq", value: "QQ" },
        { key: "wx", value: "微信" },
        { key: "bd_info", value: "备注信息" },
        { key: "online", value: "在线用户" },
        { key: "locked", value: "被锁定用户" }
      ]
    };
  },
  methods: {
    listHander(e) {
      this.tableData = e;
      this.isLoaded = true;
    },
    search() {
      this.$refs.table.init();
    },
    async handleLock(index) {
      await this.$confirm("此操作将切换此用户的锁定状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      this.tableData[index].is_lock = !this.tableData[index].is_lock;
      this.$http.post("/user/update?action=lock", {
        username: this.tableData[index].username,
        is_lock: this.tableData[index].is_lock
      });
    },
    async handleRemove(index) {
      await this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      this.$http
        .post("/user/delete", {
          username: this.tableData[index].username
        })
        .then(res => {
          if (res.code == 200) {
            this.tableData.splice(index, 1);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    handleEdit(index) {
      this.currentEdit = index;
      this.tableData[index].day = (
        (this.tableData[index].endtime - new Date().valueOf()) /
        24 /
        60 /
        60 /
        1000
      ).toFixed(2);
    },
    handleSave(index) {
      this.$http
        .post("/user/update?action=change", this.tableData[index])
        .then(res => {
          this.tableData[index].endtime =
            new Date().valueOf() +
            this.tableData[index].day * 24 * 60 * 60 * 1000;
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.currentEdit = -1;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    handleCancel(index) {
      this.currentEdit = -1;
    }
  },
  watch: {
    "requestData.postData.filterType": function(value) {
      if (
        value === "qq" ||
        value === "wx" ||
        value === "bd_info" ||
        value === "username"
      ) {
        this.filterInputShow = true;
        this.requestData.postData.filterText = "";
      } else {
        this.filterInputShow = false;
      }
    }
  },
  created() {}
};
</script>
<style>

</style>




